<template>
  <div class="container-schedule">
    <el-table :data="tableData" border>
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="姓名" prop="name" width="150" />
      <el-table-column :label="proxy.$utils.dateTimeFormateFn(item,'monthDate')" v-for="(item, index) in dateList" :key="index">
        <template #default="scope">
          <div :style="status_format_style(item, scope.row)">{{status_format(item, scope.row)}}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();
const { proxy } = getCurrentInstance();
let props = defineProps(["info", "type"]);

let tableData = ref([]);
let dateList = ref([]);
let templateUrl;
let classDetails = ref({});

async function getTemplateUrl() {
  try {
    templateUrl = await proxy.$apis.fileTemplate({
      data: { type: props.type },
      type: "downLoad",
    });
  } catch (error) {}
}

async function getClassData() {
  classDetails.value = await proxy.$apis.classData({
    type: "details",
    data: { _id: props.info._id },
  });
  console.log("班级详情", classDetails.value);
}

async function getInfo() {
  let { dates, list } = await proxy.$apis.classReport({
    type: "B5-list",
    data: { classId: props.info._id },
  });
  tableData.value = list;
  dateList.value = dates;
}

function status_format_style(item, row) {
  return {
    color: status_format(item, row, "color"),
  };
}

function status_format(item, row, type?) {
  let { dates, suspensionClassDate } = row;
  if (suspensionClassDate) {
    let time1 = proxy.$utils.getTimeFn(suspensionClassDate);
    let time2 = proxy.$utils.getTimeFn(item);
    if (time2 > time1) {
      if (type) {
        return "#994DF7";
      } else {
        return "停课";
      }
    }
  }
  if (!dates) return "-";
  if (!dates.length) return "-";
  for (let index = 0; index < dates.length; index++) {
    const element = dates[index];
    if (element.date == item) {
      switch (element.status) {
        case 1:
          return type ? "#000" : "√";
          break;
        case 2:
          return type ? "#BD3124" : "未到";
          break;
        case 3:
          return type ? "#0F40F5" : "请假";
          break;
        default:
          break;
      }
    }
  }
}

async function exportWord() {
  if (!templateUrl) return proxy.$utils.showToast("请先上传模板", 0);
  let dates = [];
  dateList.value.forEach((element) => {
    dates.push(proxy.$utils.dateTimeFormateFn(element, "monthDate"));
  });

  let data = [];

  for (let index = 0; index < tableData.value.length; index++) {
    const element = tableData.value[index];
    let arr = [element.index, element.name];
    for (let j = 0; j < dateList.value.length; j++) {
      const item = dateList.value[j];
      arr.push(status_format(item, element));
    }
    data.push(arr);
  }
  let obj = {
    table: {
      header: [...["序号", "姓名"], ...dates],
      data,
    },
    occupationalLevel: classDetails.value.occupationalLevel || "",
    classOpeningTime: classDetails.value.classOpeningTime || "",
    teachingTeacher: classDetails.value.teachingTeacher,
  };

  let ret = await proxy.$apis.classDocExport({
    templateURL: templateUrl,
    data: obj,
    fileName: "出勤记录表.docx",
    type: "docx",
  });
  window.location.href = ret;
}

function downLoadTemplate() {
  window.location.href = templateUrl;
}

defineExpose({
  exportWord,
  downLoadTemplate,
  getTemplateUrl,
});

watch(
  () => [props.info, props.type],
  (newValue, oldValue) => {
    if (newValue) {
      getInfo();
      getTemplateUrl();
      getClassData();
    }
  },
  { deep: true, immediate: true }
);
</script>



<style lang="scss" scoped>
.container {
}
</style>